<template>
	<view class="company-dynamic">
		<view class="company-content">
			<view class="company-css">
				<view class="title-view">
					<view class="title-content">
						<view class="title-text">公司动态</view>
						<view class="title-chars">
							<view>NUOZHONG</view>
							<view>Trends</view>
						</view>
					</view>
					<view class="button-view">
						<view class="button-item">
							<i class="el-icon-arrow-left"></i>
						</view>
						<view class="button-item button-active">
							<i class="el-icon-arrow-right"></i>
						</view>
					</view>
				</view>

				<swiper class="swiper-css">
					<swiper-item>
						<view class="swiper-item">
							<view class="item-content">
								<view class="swiper-title">【十载春秋铸辉煌，锦绣盛世锻华章】诺众十周年庆典暨2022年度表彰盛典圆满谢幕！</view>
								<view class="swiper-time">2023-04-23</view>
							</view>
							<view class="item-content">
								<view class="swiper-title">【十载春秋铸辉煌，锦绣盛世锻华章】诺众十周年庆典暨2022年度表彰盛典圆满谢幕！</view>
								<view class="swiper-time">2023-04-23</view>
							</view>
							<view class="item-content">
								<view class="swiper-title">【十载春秋铸辉煌，锦绣盛世锻华章】诺众十周年庆典暨2022年度表彰盛典圆满谢幕！</view>
								<view class="swiper-time">2023-04-23</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<view class="item-content">
								<view class="swiper-title">【十载春秋铸辉煌，锦绣盛世锻华章】诺众十周年庆典暨2022年度表彰盛典圆满谢幕！</view>
								<view class="swiper-time">2023-04-23</view>
							</view>
							<view class="item-content">
								<view class="swiper-title">【十载春秋铸辉煌，锦绣盛世锻华章】诺众十周年庆典暨2022年度表彰盛典圆满谢幕！</view>
								<view class="swiper-time">2023-04-23</view>
							</view>
							<view class="item-content">
								<view class="swiper-title">【十载春秋铸辉煌，锦绣盛世锻华章】诺众十周年庆典暨2022年度表彰盛典圆满谢幕！</view>
								<view class="swiper-time">2023-04-23</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<image src="/static/pc/company-dynamic-image.png" class="company-image" mode="aspectFill"></image>
		</view>

	</view>
</template>

<script>
	export default {
		name: "CompanyDynamic",
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.company-dynamic {
		width: 100%;
		padding: 100px 0;
		background: #F1F2F3;
		@extend .column;

		.company-content {
			width: 1200px;
			@extend .row;
			background: white;
			border-radius: 8px;

			.company-css {
				width: 718px;
				height: 476px;
				padding: 0 80px;
				padding-top: 70px;


				.title-view {
					width: 100%;

					@extend .row-between;

					.title-content {
						@extend .row;
						color: #1F0C00;

						.title-text {
							font-weight: 600;
							font-size: 38px;
						}

						.title-chars {
							font-size: 14px;
							margin-left: 6px;
						}
					}

					.button-view {
						@extend .row;

						.button-item {
							width: 40px;
							height: 40px;
							@extend .column;
							border: 1px solid #2C1101;
						}

						.button-item+.button-item {
							margin-left: 7px;
						}

						.button-active {
							border-color: #FF4D0F;
							color: #FF4D0F;
						}
					}
				}

				.swiper-css {
					width: 100%;
					height: 232px;
					margin-top: 37px;

					.swiper-item {
						width: 100%;
						height: 100%;
						@extend .column;
						justify-content: space-between;

						.item-content {
							width: 100%;
							
							.swiper-title {
								width: 100%;
								@extend .text-dot;
								font-weight: 400;
								font-size: 16px;
							}

							.swiper-time {
								font-size: 14px;
								color: #1F0C00;
								margin-top: 6px;
								padding-left: 9px;
							}
						}
					}
				}
			}

			.company-image {
				width: 482px;
				height: 476px;
			}
		}
	}
</style>